<template>
	<div>
		<basic-container>
			<el-row :gutter="20">
				<el-col :span="12">
					<div class="grid-content bg-purple"> {{$t("wel.table.name")}} :{{device.name}}</div>
					<div class="grid-content bg-purple">{{$t("wel.table.HardwareModel")}} : {{device.model}}</div>
					<div class="grid-content bg-purple">{{$t("wel.table.version")}} : {{device.version}}</div>
					<div class="grid-content bg-purple">imei : {{device.imei}}</div>
					<div class="grid-content bg-purple">{{$t("wel.table.code")}} : {{device.code}}</div>
					<div class="grid-content bg-purple">{{$t("wel.table.signal_intensity")}} : {{device.csq}}</div>
					<div class="grid-content bg-purple">iccid : {{device.iccid}}</div>
					<div class="grid-content bg-purple">{{$t("wel.table.lastLoginTime")}} :
						{{device.last_login_time}}
					</div>
					<div class="grid-content bg-purple">{{$t("wel.table.longitude")}} : {{device.longitude}}</div>
					<div class="grid-content bg-purple">{{$t("wel.table.latitude")}} : {{device.latitude}}</div>
					<div class="grid-content bg-purple">{{$t("wel.table.keepAliveTime")}} : {{device.keepAliveTime}}
					</div>
					<div class="grid-content bg-purple">{{$t("wel.table.keepAliveDate")}} : {{device.keepAliveDate}}
					</div>
					<div class="grid-content bg-purple">{{$t("wel.table.aiNum")}} : {{device.ai}}</div>
					<div class="grid-content bg-purple">{{$t("wel.table.diNum")}} : {{device.di}}</div>
					<div class="grid-content bg-purple">{{$t("wel.table.doNum")}} : {{device.do}}</div>
					<div class="grid-content bg-purple">{{$t("wel.table.pwmNum")}} : {{device.pwm}}</div>
				</el-col>
			</el-row>
			
			
		</basic-container>
	</div>


</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import request from '@/router/axios';
	import {
		baseUrl
	} from '@/config/env';

	export default {
		name: "wel",
		data() {
			return {
				id: 0,
				dic: [],
				searchText: "",
				data: [],
				type: '',
				box: false,
				device: {},

				delval: null,
			};
		},
		computed: {
			...mapGetters(["userInfo"]),
			option4() {

				return {
					addBtn: false,
					delBtn: false,
					menu: false,
					editBtn: false,
					//index: true,
					align: 'center',
					menuAlign: 'center',
					column: [{
							label: this.$t("wel.table.code"),
							prop: "code",
							//editDisabled:true,
						},
						{
							label: this.$t("wel.table.long"),
							prop: "long",

						},
						{
							label: this.$t("wel.table.lat"),
							prop: "lat",

						},
						{
							label: this.$t("wel.table.upTime"),
							prop: "create_time",
						}

					]
				};
			}
		},
		onload() {},
		mounted(option) {
			let param = this.$route.query;
			this.id = param.id;
			this.getdetail();
		},
		methods: {
			getdetail(data) {
				let that = this;
				request({
						headers: {
							'Content-Type': 'application/json;charset=utf-8'
						},
						method: 'post',
						url: baseUrl + '/api/device/getDevice',
						data: {
							'id': that.id
						}
					})
					.then(function(response) {
						if (response.data.status == 0) {
							that.$message.error(response.data.info)
						} else if (response.data.status == 1) {
							that.device = response.data.data;
						}
					})
					.catch(function(error) {
						console.log(error);
						that.$message.error('系统错误')
					});

			}
		}
	};
</script>

<style>
	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {}

	.bg-purple {
		margin: auto;
		padding: 0.625rem;
		text-align: center;
		font-size: 18px;
		font-weight: 400;
	}

	.bg-purple-light {}

	.grid-content {
		border-radius: 4px;
		min-height: 20px;
	}

	.row-bg {
		padding: 10px 0;
	}
</style>
